// useDesign.tsx
import { useContext } from "react";
// import { AppProviderContext } from "@/components/Application"; // 假设这是你的上下文提供者
// AppProviderContext.tsx
import React, { createContext, useContext, RefObject } from "react";

export interface AppProviderContextProps {
	prefixCls: string;
	isMobile: boolean;
}

const AppProviderContext = createContext<AppProviderContextProps | undefined>(undefined);

export function useAppProviderContext(): AppProviderContextProps {
	const context = useContext(AppProviderContext);
	if (!context) {
		throw new Error("useAppProviderContext must be used within an AppProvider");
	}
	return context;
}

// interface AppProviderProps {
// 	children: React.ReactNode;
// 	context: AppProviderContextProps;
// }

// export function AppProvider({ children, context }: AppProviderProps) {
// 	return <AppProviderContext.Provider value={context}>{children}</AppProviderContext.Provider>;
// }

// export function createAppProviderContext(context: AppProviderContextProps) {
// 	return <AppProvider context={context}>{context}</AppProvider>;
// }

export function useDesign(scope: string) {
	const values = useContext(AppProviderContext);

	if (!values) {
		throw new Error("useDesign must be used within an AppProvider");
	}

	return {
		prefixCls: `${values.prefixCls}-${scope}`,
		prefixVar: values.prefixCls
	};
}
